<template>
  <BasicModal v-bind="$attrs" @register="registerModal" :title="getTitle" :width="700" :defaultFullscreen="true" :canFullscreen="false">
    <section class="card-list">
      <div class="card" v-for="(item, index) in sources" :key="index" @click="handleAdd({ source: item.name })">
        <div class="top" :style="{ background: item.bkground }">
          <img :src="item.img" />
        </div>
        <p class="type">{{ item.desc }}</p>
      </div>
    </section>
    <DataSourceDrawer @register="registerDrawer" @success="handleSuccess" />
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, computed, unref } from 'vue';
  import { BasicModal, useModalInner } from '/@/components/Modal';
  import { sources } from './dataSource.data';
  import DataSourceDrawer from './DataSourceDrawer.vue';
  import { useDrawer } from '/@/components/Drawer';
  const [registerDrawer, { openDrawer }] = useDrawer();
  const isUpdate = ref(true);
  //表单赋值
  const [registerModal, { setModalProps }] = useModalInner(async (data) => {
    setModalProps({ confirmLoading: false, showOkBtn: false });
    isUpdate.value = !!data?.isUpdate;
    if (unref(isUpdate)) {
    }
  });
  //设置标题
  const getTitle = computed(() => (!unref(isUpdate) ? '新增数据源' : '编辑数据源'));

  function handleAdd(record) {
    openDrawer(true, {
      record,
      isUpdate: true,
      showFooter: true,
    });
  }
</script>
<style scoped>
  .card-list {
    display: flex;
    flex-wrap: wrap;
  }
  .card-list .card {
    flex: 0 0 228px;
    margin: 0 13px 13px 0;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #efefef;
    height: 248px;
    overflow: hidden;
    text-align: center;
    cursor: pointer;
  }
  .card .top {
    height: 188px;
    border-radius: 10px 10px 0 0;
    opacity: 0.9;
    border-bottom: 1px solid #dce4f2;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .card .top img {
    width: 80px;
    height: 80px;
  }
  .card .type {
    margin-top: 23px;
    margin-bottom: 0;
    font-size: 24px;
    font-weight: 400;
    color: rgba(61, 61, 61, 0.7);
    line-height: 16px;
  }
</style>
